<!--
  * @Description: 我的简历
  * @Author: rcc
  * @Date: 2024-08-07 15:15:46
  * @FilePath: /rc-recruitment/pages/resume/home/home.vue
-->

<template>
  <view class="p-h24 p-b40">
    <view class="section flex m-t40 p-a20" @click="toUserProfile">
      <view class="flex-1 flex-d-lc">
        <view class="flex">
          <text class="text-500-128">{{ myResume?.nickname }}</text>
          <text class="m-l20 m-r10 text-400-526">编辑个人信息</text>
          <image class="square-26" src="@/static/images/mine/add.png" mode="" />
        </view>

        <text class="text-500-128 m-v24">职业人士</text>

        <view class="flex">
          <image class="square-26" src="@/static/images/mine/add.png" mode="" />
          <text class="m-l10 text-500-428">{{ myResume?.mobile }}</text>
        </view>
      </view>

      <view class="flex-d-c">
        <image
          class="avatar"
          :src="genStaticUrl(myResume?.avatar ?? '')"
          mode="aspectFill"
        />
        <text class="m-t10 text-400-526">编辑头像</text>
      </view>
    </view>

    <view v-if="myResume?.content" class="section m-t20 p-a20">
      <view class="flex-sb m-b20">
        <text class="text-700-130">自我描述</text>
        <text
          class="text-500-530"
          @click="toSelfDesc('update', myResume.content)"
          >编辑</text
        >
      </view>
      <text class="text-500-330">{{ myResume.content }}</text>
    </view>
    <view v-else class="add-view flex-c m-t20" @click="toSelfDesc('create')">
      <view class="icon-view flex-c square-40">
        <image class="square-20" src="@/static/images/mine/add.png" />
      </view>
      <text class="m-l10 text-500-528">添加自我描述</text>
    </view>

    <!--
      <view class="section m-t20 p-a20">
      <view class="flex-sb m-b20">
      <text class="text-700-130">教育经历</text>
      <text class="text-500-530">编辑</text>
      </view>
      <text class="text-500-330">忠实诚信,讲原则，说到做到，决不推卸责任;有自制力，做事情始终坚持有始有终，从不半途而废;肯学习,有问题不逃避,愿意虚心向他人学习;自信但不自负,不以自我为中心;</text>
      </view>
    -->

    <view
      v-if="myResumeEduList.length === 0"
      class="add-view flex-c m-t20"
      @click="toEdu('create')"
    >
      <view class="icon-view flex-c square-40">
        <image class="square-20" src="@/static/images/mine/add.png" />
      </view>
      <text class="m-l10 text-500-528">添加教育经历</text>
    </view>
    <view v-else class="section m-t20 p-h20 p-t20">
      <view class="flex-sb m-b20">
        <text class="text-700-130">教育经历</text>
        <text class="text-500-530" @click="toEdu('create')">添加</text>
      </view>
      <view v-for="item in myResumeEduList" :key="item.id" class="card flex">
        <viwe class="flex-1">
          <text class="text-500-330"> {{ item.title }}({{ item.quali }}) </text>
          <text class="m-l10 text-500-330">{{ item.speciality }}</text>
        </viwe>
        <view class="text-500-530">
          <text @click="toEdu('update', item)">编辑</text>
          <text class="m-l10 del" @click="toEdu('del', item)">删除</text>
        </view>
      </view>
    </view>

    <view
      v-if="myResumeJobList.length === 0"
      class="add-view flex-c m-t20"
      @click="toJob('create')"
    >
      <view class="icon-view flex-c square-40">
        <image class="square-20" src="@/static/images/mine/add.png" />
      </view>
      <text class="m-l10 text-500-528">添加工作经历</text>
    </view>
    <view v-else class="section m-t20 p-h20 p-t20">
      <view class="flex-sb m-b20">
        <text class="text-700-130">工作经历</text>
        <text class="text-500-530" @click="toJob('create')">添加</text>
      </view>
      <view v-for="item in myResumeJobList" :key="item.id" class="card flex">
        <text class="flex-1 text-500-330">{{ item.title }}</text>
        <view class="text-500-530">
          <text @click="toJob('update', item)">编辑</text>
          <text class="m-l10 del" @click="toJob('del', item)">删除</text>
        </view>
      </view>
    </view>

    <view
      v-if="mySkillList.length === 0"
      class="add-view flex-c m-t20"
      @click="toSkill('create')"
    >
      <view class="icon-view flex-c square-40">
        <image class="square-20" src="@/static/images/mine/add.png" />
      </view>
      <text class="m-l10 text-500-528">添加职业技能</text>
    </view>
    <view v-else class="section m-t20 p-h20 p-t20">
      <view class="flex-sb m-b20">
        <text class="text-700-130">职业技能</text>
        <view class="text-500-530">
          <text @click="toSkill('create')">添加</text>
        </view>
      </view>
      <view v-for="item in mySkillList" :key="item.id" class="card flex">
        <text class="flex-1 text-500-330">{{ item.title }}</text>
        <view class="text-500-530">
          <text @click="toSkill('update', item)">编辑</text>
          <text class="m-l10 del" @click="toSkill('del', item)">删除</text>
        </view>
      </view>
    </view>
    <!-- <view class="section m-t20 p-h20 p-t20">
      <view class="flex-sb m-b20">
        <text class="text-700-130">项目经历</text>
        <text class="text-500-530">编辑</text>
      </view>
      <view class="card flex">
        <text class="flex-1 text-500-330">520主题活动</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-500-330">策划年终总结大会</text>
        <image class="square-36" src="@/static/images/public/arrow-3.png" />
      </view>
    </view> -->

    <view class="flex-c">
      <RcButton text="预览简历" :width="340" :top="100" @click="toPreview" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, defineExpose, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import RcButton from "@/components/button.vue";
import type { TResume, TResumeEdu, TResumeJob } from "@/types/api.d";
import { genStaticUrl } from "@/utils/utils";

const myResume = ref<TResume | null>(null);

const myResumeEduList = computed(() => myResume.value?.educate ?? []);
const myResumeJobList = computed(() => myResume.value?.job ?? []);
const mySkillList = computed(() => myResume.value?.skill ?? []);
const toUserProfile = () => {
  uni.navigateTo({ url: "/pages_site/pages/personal/personal" });
};

const toSelfDesc = (type: "create" | "update", desc?: string) => {
  const url = `/pages/resume/self/self?type=${type}`;

  if (type === "update") {
    if (desc) {
      uni.setStorage({
        key: "RESUME_SELF_DESC",
        data: desc,
        success: () => {
          uni.navigateTo({ url });
        },
      });
    }
  } else {
    uni.navigateTo({ url });
  }
};
//学历
const toEdu = (type: "create" | "update" | "del", record?: TResumeEdu) => {
  const url = `/pages/resume/educate/educate?type=${type}`;
  if (type === "del") {
    return uni.showModal({
      title: "提示",
      content: "是否删除选中的教育经历",
      success: (success) => {
        if (success.confirm) {
          uni.$u.post("/educate/del", { id: record?.id }).then((res) => {
            uni.showToast({ title: res.msg, icon: "none" });
            getMyResume();
          });
        }
      },
    });
  }
  if (type === "update") {
    if (record) {
      uni.setStorage({
        key: "RESUME_EDU_RECORD",
        data: JSON.stringify(record),
      });
    }
  }
  uni.navigateTo({ url });
};
//工作经历
const toJob = (type: "create" | "update" | "del", record?: TResumeJob) => {
  const url = `/pages/resume/work/work?type=${type}`;
  if (type === "del") {
    return uni.showModal({
      title: "提示",
      content: "是否删除选中的工作经历",
      success: (success) => {
        if (success.confirm) {
          uni.$u.post("/job/del", { id: record?.id }).then((res) => {
            uni.showToast({ title: res.msg, icon: "none" });
            getMyResume();
          });
        }
      },
    });
  }
  if (type === "update") {
    if (record) {
      uni.setStorage({
        key: "RESUME_JOB_RECORD",
        data: JSON.stringify(record),
      });
    }
  }
  uni.navigateTo({ url });
};

//职业技能
const toSkill = (type: "create" | "update" | "del", record?: TResumeJob) => {
  const url = `/pages/resume/skill/skill?type=${type}`;
  if (type === "del") {
    uni.showModal({
      title: "提示",
      content: "是否删除选中的职业技能",
      success: (res) => {
        if (res.confirm) {
          uni.$u.post("/skill/del", { id: record.id }).then((res) => {
            uni.showToast({ title: res.msg, icon: "none" });
            getMyResume();
          });
        }
      },
    });
    return;
  }
  if (type === "update") {
    if (record) {
      uni.setStorage({
        key: "RESUME_SKILL_RECORD",
        data: JSON.stringify(record),
      });
    }
  }
  uni.navigateTo({ url });
};

const toPreview = () => {
  uni.navigateTo({ url: "/pages/resume/preview/preview" });
};

const getMyResume = () => {
  uni.showLoading({ mask: false });
  uni.$u
    .get<TResume>("/resume/my")
    .then((res) => {
      if (res.code === 1) {
        myResume.value = res.data;
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

defineExpose({ getMyResume });

onLoad(() => {
  getMyResume();
});
</script>

<style lang="scss">
page {
  background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.section {
  border-radius: 10rpx;
  background-color: $bg-color-1;
  .del {
    color: red;
  }
  .avatar {
    width: 118rpx;
    height: 118rpx;
    border-radius: 50%;
    border: 2rpx solid #f1f1f1;
  }

  .card {
    height: 102rpx;
    border-bottom: 1rpx solid $border-color-4;

    &:last-child {
      border: none;
    }
  }
}

.add-view {
  height: 82rpx;
  border-radius: 10rpx;
  background-color: $bg-color-1;

  .icon-view {
    border-radius: 50%;
    background-color: $bg-color-5;
  }
}
</style>
